/*
 * Copyright 2021 The Android Open Source Project
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

package app.delish.compose.view

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

/**
 * 标签视图组件：用于展示带背景和圆角的分类标签
 *
 * 设计特点：
 * - 透明背景：使用传入颜色的8%透明度版本
 * - 圆角设计：12dp圆角，符合Material Design风格
 * - 内边距：保证标签内容有足够的呼吸空间
 *
 * @param chipMessage 标签显示的文本内容
 * @param color 标签的主题颜色（影响文字颜色和背景透明度）
 */
@Composable
fun ChipView(
    chipMessage: String,  // 标签显示的文本
    color: Color          // 标签主题色（文字和背景）
) {
    // 使用Box作为标签容器
    Box(
        modifier = Modifier
            .padding(8.dp)  // 外间距（与其他元素保持距离）
            .wrapContentWidth() // 宽度自适应内容
            .clip(RoundedCornerShape(12.dp)) // 12dp圆角裁剪
            .background(color.copy(alpha = 0.08f)) // 使用主题色的8%透明度作为背景
    ) {
        // 标签文本
        Text(
            text = chipMessage,  // 传入的文本内容
            modifier = Modifier.padding(  // 内边距设置
                top = 6.dp,
                bottom = 6.dp,
                start = 12.dp,
                end = 12.dp
            ),
            style = MaterialTheme.typography.caption, // 小号字体样式
            color = color  // 使用传入的颜色作为文本颜色
        )
    }
}

/**
 * 预览函数：展示不同颜色的标签效果
 */
@Preview(showBackground = true)
@Composable
fun ChipViewPreview() {
    // 在列布局中展示多个标签样式
    Column(
        modifier = Modifier
            .background(Color(0xFF121212))  // 深色背景（模拟应用主题）
            .padding(16.dp)
    ) {
        // 1. 健康标签
        ChipView(
            chipMessage = "健康饮食",
            color = Color.Green
        )

        Spacer(modifier = Modifier.height(8.dp))

        // 2. 快捷标签
        ChipView(
            chipMessage = "15分钟快餐",
            color = Color.Blue
        )

        Spacer(modifier = Modifier.height(8.dp))

        // 3. 素食标签
        ChipView(
            chipMessage = "素食",
            color = Color(0xFF4CAF50) // 深绿色
        )

        Spacer(modifier = Modifier.height(8.dp))

        // 4. 限时标签
        ChipView(
            chipMessage = "限时优惠",
            color = Color.Red
        )

        Spacer(modifier = Modifier.height(8.dp))

        // 5. 高蛋白标签
        ChipView(
            chipMessage = "高蛋白",
            color = Color.Yellow
        )
    }
}
